<!--
 * @Author: canlong.shen
 * @Date: 2021-10-21 16:57:26
 * @LastEditors: your name
 * @LastEditTime: 2021-10-22 15:40:41
 * @Description: file content
-->
<html>
  <head>
    <title>课04.Vuex五大核心—State</title>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- vuex -->
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const store = new Vuex.Store({
        state: {
          count: 100,
        },
        mutations: {
          increment(state) {
            state.count++
          },
        },
      })

      const Counter = {
        template: `<div>
          {{count}}
          {{sayHi}}
          </div>`,
        data() {
          return {
            start: 10000,
          }
        },
        computed: {
          ...Vuex.mapState({
            count: function (state) {
              return this.start + state.count
            },
          }),
          sayHi() {
            return "hi"
          },
        },
      }

      const app = new Vue({
        el: "#app",
        store,
        components: {
          Counter,
        },
        template: `<div>
               <Counter></Counter>
              </div>`,
      })

      console.log("before", store.state.count)
      store.commit("increment")
      console.log("after", store.state.count)
    </script>
  </body>
</html>
